<template>
<div class="Word">
	演示: 文档保存前和保存后执行的事件。点击保存按钮后，请仔细观察下面文本框中提示消息的变化。<br/>
  <input id="input"  :value="message"/>
  <div style="width:auto; height:700px;" v-html="poHtmlCode" >
  </div>
 
</div>
</template>

<script>
  import axios from 'axios';
  export default{
    name: 'Word',
    data(){
      return {
        message: ' ',
        poHtmlCode: '',

      }
    },
    created: function(){
      //由于vue中的axios拦截器给请求加token都得是ajax请求，所以这里必须是axios方式去请求后台打开文件的controller
      axios.post("/api/BeforeAndAfterSave/Word").then((response) => {
        this.poHtmlCode = response.data;

      }).catch(function (err) {
        console.log(err)
      })
    },
    methods:{
      //控件中的一些常用方法都在这里调用，比如保存，打印等等
	  
	    Save() {
			 pageofficectrl.WebSave();
		  },
			OnPageOfficeCtrlInit() {
				// PageOffice的初始化事件回调函数，您可以在这里添加自定义按钮
				pageofficectrl.AddCustomToolButton("保存", "Save", 1);
			},
			AfterDocumentOpened(){
			  // PageOffice的文档打开后事件回调函数
			},
			BeforeDocumentSaved() {
			  // PageOffice的文档保存前事件回调函数
        //pageofficectrl.word.SetTextToSelection("文件要开始保存了\r\n");//光标处插入文本
        this.message="文件要开始保存了...."

			},
			AfterDocumentSaved() {
			  // PageOffice的文档保存后事件回调函数
        //pageofficectrl.word.SelectionCollapse(0);//折叠光标到选中区域的末尾处（取消选中）
        //pageofficectrl.word.SetTextToSelection("文件已经保存了");//光标处插入文本
        //alert("文件保存成功了");
         this.message="文件已经保存了."
			}
    },
    mounted: function(){
      // 将vue中的方法赋值给window
	    window.Save = this.Save;
      
      // 以下的为PageOffice事件的回调函数，名称不能改，否则PageOffice控件调用不到
		  window.OnPageOfficeCtrlInit = this.OnPageOfficeCtrlInit;
		  window.AfterDocumentOpened = this.AfterDocumentOpened;
		  window.BeforeDocumentSaved = this.BeforeDocumentSaved;
		  window.AfterDocumentSaved = this.AfterDocumentSaved;
    }
}
</script>
